<template>
	<view class="">
		<view class="header">
			<view class="headPortrait" @tap="headPortraitEvent">
				<open-data type="userAvatarUrl"></open-data>
			</view>
			<view class="headInfo" @tap="NickNameExit">
				<!-- <open-data type="userNickName"></open-data> -->
				<navigator url="./nickName/nickName" class="sign">{{my_NickName}}</navigator>
				<navigator url="./nickName/nickName" class="sign">{{sign}}</navigator>
			</view>
		</view>
		<view class="mainInfo" v-for="(item,index) in navMsg" :key=index @tap="enterPage(index)">
			<van-icon class="icon1" :name="item.icon1" :color=item.col />
			<text>{{item.msg}}</text>
			<van-icon class="icon2" name="item.icon2" />
		</view>

		<!-- 登录状态 -->
		<view class="loginBox" v-if="showLogin">
			<text class="login">您当前尚未登录</text>
			<text class="login size">未登录,将无法享受预约服务哦~</text>
			<button class="loginBtn" type="default" @tap="loginLink">立即登录</button>
		</view>
		<button class="aqexit" type="submit" @tap="exit">
			<van-icon name="wechat" class='wechat' /> 安全退出
		</button>
		<van-dialog id="van-dialog" />
	</view>
</template>

<script>
	import Dialog from '../../wxcomponents/vant/dist/dialog/dialog'
	export default {
		onShow: function() { //option为object类型，会序列化上个页面传递的参数
			this.showLogin = this.$store.state.isLogin
			console.log('我的中isLogin是:', this.showLogin);
			if (this.showLogin) {
				uni.showToast({
					title: '您还未登录',
					icon: 'loading'
				})
			}
			this.$store.commit('checksession')
			//页面显示--检查Session是否过期
			wx.checkSession({
				success: function(res) { //Session没过期
					console.log("处于登录状态");
				},
				fail: function(res) { //Session过期
				    uni.removeStorage({//清除token
				    	key: 'token',
						success() {
							uni.showToast({
								title: 'session过期,请登录'
							})
						}
				    })				
				}
			})
		},
		data() {
			return {
				showLogin: this.$store.state.isLogin, //true
				my_NickName: "hi,您尚未登录",
				sign: "登录后享受更多功能。点击登录",
				navMsg: [{
						msg: "个人信息",
						icon1: "chat-o",
						icon2: "arrow",
						col: "#75c857",
						puth: "../myPage/message/message"
					},
					{
						msg: "修改密码",
						icon1: "closed-eye",
						icon2: "arrow",
						col: "#c89f4d",
						puth: "../myPage/password/password"
					},
					{
						msg: "关于我们",
						icon1: "comment-circle-o",
						icon2: "arrow",
						col: "#c87285",
						puth: "../myPage/regards/regards"
					}
				],
				userName: "",
				signature: "",
			}
		},
		methods: {
			loginLink() {
				uni.navigateTo({
					url: '../home/home'
				})
			},
			headPortraitEvent() {
				uni.navigateTo({
					url: './headerPage/headerPage',
				})
			},
			userNameChange(un) {
				this.userName = un.detail;
			},
			signatureChange(s) {
				this.signature = s.detail;
			},
			enterPage(index) {
				// console.log(index);
				console.log(this.navMsg[index]);
				uni.navigateTo({
					url: this.navMsg[index].puth
				})
			},
			NickNameExit() {
				this.show = true;
			},
			submitBtn(uName, sign) {
				this.show = false;
				this.my_NickName = uName;
				this.sign = sign;
			},
			exit() {
				console.log('点击了')
				Dialog.confirm({
						title: '确认退出',
						message: '退出不能享受预约服务',
					})
					.then(() => {
						uni.navigateTo({
							url: '../home/home'
						})
					})
					.catch(() => {
						// on cancel
					});
			}
		}
	}
</script>

<style>
	.userNameBox {
		background-color: #04BE02;
	}

	body {
		background-color: #f0f0f0;

	}

	.header {
		width: 100%;
		height: 280upx;
		background-color: #3578E5;
		position: relative;
	}

	.aqexit {
		width: 80%;
		height: 80upx;
		background-color: #007AFF;
		color: #FFFFFF;
		margin-top: 100upx;
		line-height: 80upx;
	}

	.wechat {
		line-height: 80upx;
		margin-right: 6px;
	}

	.header .headPortrait {
		width: 140upx;
		height: 140upx;
		background-color: #FFF7CC;
		border-radius: 50%;
		border: 0.8px solid #d2f6ff;
		position: absolute;
		top: 50%;
		transform: translate(0, -50%);
		margin-left: 30upx;
		overflow: hidden;
	}

	.header .headPortrait image {
		width: 100%;
		height: 100%;
	}

	.headInfo {
		width: 60%;
		height: 60%%;
		position: absolute;
		right: 14%;
		top: 35%;
		color: #FFFFFF;
	}

	.headInfo navigator {
		color: #fff;
	}

	.headInfo .nickName {
		margin-top: 40upx;
		font-size: 16px;
	}

	.headInfo .sign {
		font-size: 12px;
	}

	.mainInfo {
		width: 100%;
		height: 90upx;
		background-color: #fff;
		margin-top: 6upx;
	}

	.mainInfo van-icon {
		vertical-align: middle;

	}

	.mainInfo text {
		line-height: 90upx;
	}

	.icon1 {
		margin: 0 30upx;
	}

	.icon2 {
		float: right;
		margin: 33upx 50upx 30upx 0;
	}

	.van-cell {
		padding-top: 100px;
	}

	.loginBox {
		box-sizing: border-box;
		width: 100%;
		height: 100upx;
		background: rgba(0, 0, 0, 0.7);
		position: fixed;
		bottom: 0;
		padding: 3px 26px;
	}

	.loginBox .loginBtn {
		width: 200upx;
		height: 60upx;
		position: absolute;
		right: 7%;
		top: 50%;
		transform: translate(0, -50%);
		line-height: 60upx;
		background-color: #007AFF;
		color: #ffffff;
		border-radius: 60upx;
	}

	.login {
		display: block;
		color: #FFFFFF;
		margin: 0;
		padding: 0;
	}

	.size {
		font-size: 12px;
		color: #dadada;
	}
</style>
